class Page
{
    constructor(el,options={}){
        this.el = document.querySelector(el);
        this.options = options;
        this.init();
    }

    init(){
        this.createTag();
        this.bindEvent();
    }

//分页标签
    createTag(){
        this.el.innerHTML = '';
        let pageTag = this.options.pageTag;
        for(let key in pageTag){
            // let pObj = document.createElement('p');
            // pObj.innerText = pageTag[key];
            // pObj.style.border = 'solid 1px black';
            // pObj.style.margin = '0 5px';
            // pObj.style.padding = '0 5px';
            // this.el.appendChild(pObj);
            this.createP(pageTag[key],this.el,'p');
        }
        this.createNum();
    }

//分页页码
    createNum(){
        let box = this.el.querySelector('p:nth-of-type(3)');
        box.style.border = 'none';
        box.style.margin = '0px';
        box.style.padding = '0px';
        box.style.display = 'flex'

        this.options.pageInfo.totalPage = Math.ceil(this.options.pageInfo.totalData/this.options.pageInfo.pageSize);
        let pageNum = this.options.pageInfo.pageNum;
        let totalPageNum = this.options.pageInfo.totalPage;
        if(totalPageNum<7){
            for(let i=1;i<=totalPageNum;i++){
                this.createP(i,box,'p')
            }
        }
        else if(pageNum<5){
            for(let i=1;i<=5;i++){
                this.createP(i,box,'p')
            }
            this.createP('...',box,'p');
            this.createP(totalPageNum-1,box,'p');
            this.createP(totalPageNum,box,'p');
        }else if(pageNum==5){
            for(let i=1;i<=7;i++){
                this.createP(i,box,'p')
            }
            this.createP('...',box,'p');
            this.createP(totalPageNum-1,box,'p');
            this.createP(totalPageNum,box,'p');
        }else if(pageNum>5 && pageNum<totalPageNum-4){
            for(let i=1;i<=2;i++){
                this.createP(i,box,'p')
            }
            this.createP('...',box,'p');

            this.createP(pageNum-2,box,'p');
            this.createP(pageNum-1,box,'p');
            this.createP(pageNum,box,'p');
            this.createP(pageNum+1,box,'p');
            this.createP(pageNum+2,box,'p');

            this.createP('...',box,'p');
            this.createP(totalPageNum-1,box,'p');
            this.createP(totalPageNum,box,'p');
        }else if(pageNum>=totalPageNum-4){
            for(let i=1;i<=2;i++){
                this.createP(i,box,'p')
            }
            this.createP('...',box,'p');
            for(let i=totalPageNum-4;i<=totalPageNum;i++){
                this.createP(i,box,'p')
            }
        }

        // for(let i=1;i<6;i++){
        //     // let pObj = document.createElement('p');
        //     // pObj.innerText = i;
        //     // pObj.style.border = 'solid 1px black';
        //     // pObj.style.margin = '0 5px';
        //     // pObj.style.padding = '0 5px';
        //     // box.appendChild(pObj);
        //     box.style.display = 'flex'
        //     this.createP(i,box,'p');
        // }
    }


    //创建分页标签对象
    createP(content,tag,p){
        let pObj = document.createElement(p);
            pObj.innerText = content;
            pObj.style.border = 'solid 1px black';
            pObj.style.margin = '0 5px';
            pObj.style.padding = '0 5px';
            pObj.style.cursor = 'pointer';
            tag.appendChild(pObj);
            if(content==this.options.pageInfo.pageNum){
                pObj.style.backgroundColor = 'orange';
            }
    }

    bindEvent(){
        this.el.onclick=(evt)=>{
            let e = evt || window.event;
            let target = e.target || e.srcElement;
            if(target.nodeName==='P'){
                switch(target.innerText){
                    case this.options.pageTag.first:
                         this.options.pageInfo.pageNum=1;
                         if(this.options.callback){
                            this.options.callback(this.options.pageInfo.pageNum);  
                         }
                         break;
                    case this.options.pageTag.prev:
                        if(this.options.pageInfo.pageNum==1){
                            target.style.cursor='not-allowed'
                            return
                        } 
                         this.options.pageInfo.pageNum--;
                         if(this.options.callback){
                            this.options.callback(this.options.pageInfo.pageNum);  
                         }
                         break;
                    case this.options.pageTag.next:
                        if(this.options.pageInfo.pageNum==this.options.pageInfo.totalPage){
                            target.style.cursor='not-allowed'
                            return
                        } 
                        this.options.pageInfo.pageNum=parseInt(this.options.pageInfo.pageNum)+1;
                        if(this.options.callback){
                            this.options.callback(this.options.pageInfo.pageNum);  
                         }
                        break;
                    case this.options.pageTag.last:
                         this.options.pageInfo.pageNum=this.options.pageInfo.totalPage;
                         if(this.options.callback){
                            this.options.callback(this.options.pageInfo.pageNum);  
                         }
                        break;
                    default: 
                        if(parseInt(target.innerHTML)>0){
                            this.options.pageInfo.pageNum=parseInt(target.innerHTML);
                            if(this.options.callback){
                                this.options.callback(this.options.pageInfo.pageNum);  
                             }
                        }
                    break;
                }

                this.createTag();
               

            }
        }
    }







}